<template>
	<view class="">
		<!-- 添加笔记 -->
		<hx-navbar :fixed="true" transparent="show" :back="false" :rightSlot="false" :background-color="[239, 61, 34]">
			<block slot="left">
				<view class="ring" style="margin-left: 8px;" @click="backPage">
					<uni-icons type="arrowleft" color="#ffffff" size='20'></uni-icons>
				</view>
			</block>
			<view class="ctn">
				<view class="tabs-box">
					<text class="cffff f32 font_bold" style="margin-left: 228rpx;">{{navbarTitle}}</text>
				</view>

				<view class="leftBox f28 cffff" @click="save()">
					保存
				</view>
				<!-- #ifdef MP -->
				<view class="jrNull"></view>
				<!-- #endif  -->
			</view>
		</hx-navbar>

		<!-- 上传图片区域（伪） -->
		<view class="divClass">
			<uploading :maxLength='9' :refundimage='phoneList' @uploadSuccess='phoneListRead' />
		</view>
		<view class="divider" />


		<!-- 推荐指数 -->
		<view class="flex center f28" style="margin-left: 20rpx;margin-top: 20rpx;">
			<text class="pb-10">推荐指数：</text>
			<uni-rate size="18" :value="rate" active-color='#EF3D22' @change='changeRate'></uni-rate>
		</view>
		<view class="divider" />
		<!-- 文字区域 -->
		<view class="bgfff divClass f28" style="margin-top: 0;padding-top: 0;">
			<view class="mt-20">
				<input class="uni-input f28" confirm-type="text" placeholder="添加标题" style="border-bottom: 1px solid #F5F5F5;padding: 10rpx 0;"
				 v-model="title" />
				<textarea class="f28 mt-10" style="height: 200rpx;" placeholder="请输入笔记内容" v-model="val_txt" />
				</view>
		</view>
		<!-- 选择地址按钮 -->
		
		
        
    </view>
</template>

<script>
export default {
    data(){
        return{
            navbarTitle:'添加笔记',		//页面标题
			title:'',		//标题
			val_txt:'',		//输入内容
			phoneList:[],	//图片列表
			rate:0,			//推荐星数
        };
    },
    components:{
        
    },
	onLoad(){
		
	},
    mounted(){

    },
    methods:{
		//返回
		backPage(){
			uni.navigateBack();
		},
		//上传图片
		phoneListRead(obj){
		    this.phoneList = obj;
		},
		//修改推荐指数
		changeRate(e){
			this.rate = e.value;
		},
		//保存
		save(){
			if(this.phoneList.length == 0){
				uni.showToast({
					title: '至少添加一张图片',
					icon: 'none',
					duration: 2000,
				});
				return;
			}
			if(!this.title){
				uni.showToast({
					title: '请输入标题',
					icon: 'none',
					duration: 2000,
				});
				return;
			}
			if(!this.val_txt){
				uni.showToast({
					title: '请输入内容',
					icon: 'none',
					duration: 2000,
				});
				return;
			}
			let params = {
				content:this.val_txt,
				imgs:'https://wx.qlogo.cn/mmhead/Q3auHgzwzM7eyF2E9ec9A9UGLnKYt42MR4mddG7F4EYT8VLsSwhBgw/0',
				title:this.title,
				lat:'',
				lng:'',
				ratings:this.rate,
			}
			this.$http.post(this.$api.article.save, params).then(res => {
				if(res.code == 200){
					uni.showToast({
						title: '保存成功',
						icon: 'none',
						duration: 2000,
					});
					setTimeout(()=>{
						uni.navigateBack();
					},300)
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000,
					});
				}
				
			});
		}
    },
}
</script>

<style lang="scss">
.ctn{
	width: 100%;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	align-items: center;
	.leftBox{
		display: flex;
		width: 30px;
		justify-content: space-between;
		flex: none;
		margin: 0 8px;
		align-items: center;
	}
	.jrNull{
		width: 95px;
		flex: none;
	}
}
.divClass{
	margin-top: 20rpx;
	padding: 20rpx;
}
</style>
